<template>
    <div style="margin-bottom:80px;">
        <ul class="health-box clearfix b-g-f">
            <li class="clearfix health-box-li">
                <span class="health-box-li-span">
                    <img class="health-box-li-xing" src="../../../static/img/dian.png" alt="">
                    患者姓名
                </span>
                <input type="text" class="health-box-li-input" v-model="health.name" placeholder="请填写姓名（必填）" :disabled="isdisabled" />
                <div class="health-bianji" v-if="isEditor  && !$route.query.healthTitle" @click="isdisabled = false,isEditor = !isEditor">
                    <img class="health-bianji-img" src="../../../static/img/bianji.png" alt="">
                    编辑
                </div>
                
            </li>
            <li class="clearfix health-box-li">
                <span class="health-box-li-span">
                    <img class="health-box-li-xing" src="../../../static/img/dian.png" alt="">
                    联系电话
                </span>
                <input type="text" v-model="health.tel" class="health-box-li-input" placeholder="请填写联系电话（必填）" :disabled="isdisabled" />
            </li>
            <li class="clearfix health-box-li">
                <span class="health-box-li-span">
                    备注
                </span>
                <input type="text" v-model="health.tel_remark" class="health-box-li-input" placeholder="请填写联系人备注" :disabled="isdisabled" />
            </li>
            <li class="clearfix health-box-li">
                <span class="health-box-li-span">
                    <img class="health-box-li-xing" src="../../../static/img/dian.png" alt="">
                    出院指导单
                </span>
                <input type="number" v-model="health.guide_sheet_num" class="health-box-li-input health-box-li-dan" :disabled="isdisabled" />
                份
            </li>
            <li class="clearfix health-box-li health-textarea-box">
                <span class="health-box-li-span">
                    病情描述
                </span>
                <textarea class="health-box-li-textarea" v-model="health.ill_desc" placeholder="请简单描述病情" :disabled="isdisabled"></textarea>
            </li>
            <li class="clearfix health-box-li health-textarea-box">
                <span class="health-box-li-span">
                    随访要点
                </span>
                <textarea class="health-box-li-textarea" v-model="health.follow_points" placeholder="请填写随访主意事项" :disabled="isdisabled"></textarea>
            </li>
            <li class="clearfix health-box-li health-textarea-box">
                <span class="health-box-li-span">
                    阶段目标
                </span>
                <textarea class="health-box-li-textarea" v-model="health.stage_target" placeholder="请填写阶段性目标" :disabled="isdisabled"></textarea>
            </li>
        </ul>
        <div class="health-upload b-g-f clearfix">
            <span class="health-upload-span" v-for="(item,index) in pics" :key="index">
                <img class="health-upload-img" :src="item.url" alt="">
                <img class="health-cha" v-if="isEditor == false" src="../../../static/img/cha.png" alt="" @click="delOnePic(item.id)">
            </span>
            <span class="health-upload-sc" v-if="pics.length < 3">
                <img class="add-img" src="../../../static/img/add-img.png" alt="">
                <span class="upload-num">最多上传3张</span>
                <input type="file" class="upload-file" accept="image/*" @change="uploadOnePic($event)">
            </span>
        </div>
        <ul class="health-suifang clearfix b-g-f" v-for="(item,index) in health.follow_records" :key="index">
            <router-link tag="li" :to="{name:'record',query:{record:JSON.stringify(item),dietitian:healthTitle}}" class="health-li clearfix">
                随访记录<em class="health-suifang-beizhu" v-if="item.dietitian_remark">(已备注)</em>
                <em class="health-suifang-data">{{$time(item.create_time)}}</em>
            </router-link>
        </ul>
        <router-link tag="div" :to="{name:'record',query:{id:id,healthId:health.id}}" class="add-sf b-g-f clearfix" v-if="$route.query.healthTitle">
            <img class="add-sf-img" src="../../../static/img/tianjia.png" alt="" srcset="">
            添加随访记录
        </router-link>
        <div class="add-address" v-if="isEditor == false && !$route.query.healthTitle" @click="addHealthRecords()">
            完成
        </div>
    </div>
</template>
<script>
import { Toast } from 'vant';
export default {
    data(){
        return{
            id:this.$route.query.id,        // 获取用户id
            health:{
                name:'',
                tel:'',
                tel_remark:'',
                guide_sheet_num:'',
                ill_desc:'',
                follow_points:'',
                stage_target:'',
                follow_records:[]
            },
            healthTitle:this.$route.query.healthTitle ? this.$route.query.healthTitle : 'dietitian',
            pics:[],
            isEditor:false,
            isdisabled:false
        }
    },
    mounted(){
        this.getHealthRecords()
    },
    methods:{
        // 上传图片
        uploadOnePic(e){
            let fd = new FormData()
            if (e.target.files[0].length !== 0) {
                fd.append('pic', e.target.files[0])
            }
            this.$api.dietitian.uploadOnePic(fd).then(resp=>{
                if(resp.code == 1){
                    let ids = []
                    this.pics.push(resp.data)
                    this.pics.forEach(e => {
                        ids.push(e.id)
                    })
                    this.health.pics = ids.join(',')
                }
            })
        },
        // 删除图片
        delOnePic(id){
            this.$api.dietitian.delOnePic({id:id}).then(resp=>{
                if(resp.code == 1){
                    let arr = [],ids = []
                    Toast('删除成功')
                    this.pics.forEach(e => {
                        if(e.id != id){
                            arr.push(e)
                            ids.push(e.id)
                        }
                    })
                    this.health.pics = ids.join(',')
                    this.pics = arr
                }else{
                    Toast(resp.msg)
                }
            })
        },
        // 获取健康档案
        getHealthRecords(){
            this.$api.dietitian.getHealthRecords({uid:this.id}).then(resp=>{
                if(resp.code == 1){
                    if(resp.data){
                        this.health = resp.data
                        this.isEditor = true
                        this.isdisabled = true
                        this.pics = resp.data.pics
                    }
                }
            })
        },
        // 添加将康档案
        addHealthRecords(){
            this.health.uid = this.id
            this.$api.dietitian.addHealthRecords(this.health).then(resp=>{
                if(resp.code == 1){
                    Toast('添加成功')
                    this.$router.go(-1)
                }
            })
        },
    }
}
</script>

<style lang="less" scoped>

.health-upload{
    padding: 40px;
    .health-upload-span{
        width: 260px;
        height: 260px;
        display: block;
        overflow: hidden;
        position: relative;
        margin-right: 20px;
        float: left;
        .health-cha{
            position: absolute;
            right: 0;
            top: 0;
            z-index: 99;
            width: 42px;
            height: 42px;
        }
    }
    .health-upload-sc{
        background-color: #f4f4f4;
        width: 260px;
        height: 260px;
        display: block;
        float: left;
        text-align: center;
        position: relative;
        .add-img{
            margin-top: 80px;
            width: 50px;
            height: 50px;
        }
        .upload-num{
            font-size: 34px;
            display: block;
            line-height: 50px;
            color: #999;
        }
        .upload-file{
            position: absolute;
            width: 260px;
            height: 260px;
            display: block;
            left: 0;
            top: 0;
            z-index: 99;
            opacity: 0;
        }
    }
}
.health-suifang{
    padding: 0 40px;
    margin-top: 30px;
    .health-li{
        border-bottom:solid #f5f5f5 2px;
        height: 110px;
        line-height: 110px;
        font-size: 38px;
        background-image: url('../../../static/img/you.png');
        background-repeat: no-repeat;
        background-position: center right;
        background-size: 20px;
        .health-suifang-beizhu{
            color: #5CA1EE;
        }
        .health-suifang-data{
            float: right;
            font-size: 34px;
            color: #999;
            padding-right: 30px;
        }
    }
}
.add-sf{
    margin-top: 30px;
    text-align: center;
    padding: 40px;
    color: #999;
    font-size: 40px;
    .add-sf-img{
        width: 50px;
        vertical-align: middle;
    }
}
</style>

